<template>
  <view class="navbar" :style="{
    paddingTop: safeArea.top + 'px',
  }">
    <view class="image">
      <image class="image" src="../../../../static/images/mIntergral/jf.png" mode="aspectFit|aspectFill|widthFix"
        lazy-load="false" binderror="" bindload="" />

      <view class="tabbarTop">
        <view class="left">
          <view class="l_back">
            <image src="../../../../static/images/recruit/tabarTopIcon.png" mode="scaleToFill"  @click="handleBack"/>
          </view>
          <view class="l_home" >
            <image src="../../../../static/images/recruit/tabarTopIcon1.png" mode="scaleToFill" @click="returnHome"/>
          </view>
        </view>
      </view>

      <view class="myIntegral">
        <view class="title-t"> {{ signInfo.integralQuantity ? signInfo.integralQuantity : 0 }} </view>
        <view class="title-f"> 我的积分 </view>
      </view>

      <view class="runningWater">
        <view @click="goPointsShop">
          <text class="" selectable="false" space="false" decode="false">
            积分商城
          </text>
          <image class="image" src="../../../../static/images/mIntergral/toPath.png" mode="aspectFit|aspectFill|widthFix"
            lazy-load="false" binderror="" bindload="" />
        </view>
        <view @click="goPointsCount">
          <text class="" selectable="false" space="false" decode="false">
            积分流水
          </text>
          <image class="image" src="../../../../static/images/mIntergral/toPath.png" mode="aspectFit|aspectFill|widthFix"
            lazy-load="false" binderror="" bindload="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    signInfo: {
      type: Object,
      default: null,
    },
  },
  computed: {
    ...mapState(["safeArea", "capsule"]),
  },

  methods: {
    returnHome() {
      uni.switchTab({
        url: "/pages/tabbarChange/firstPage/index",
      });
    },
    handleBack() {
      uni.navigateBack();
    },
    // 跳转积分商城
    goPointsShop() {
      uni.navigateTo({
        url: "/pages/recruit/mine/pointsShop/index"
      })
    },
    // 跳转积分流水
    goPointsCount() {
      uni.navigateTo({
        url: "/pages/recruit/mine/pointCount/index"
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  height: 40rpx;
  background-color: #ff9e24;

  .image {
    position: relative;
    width: 100%;
    height: 415rpx;
    border-bottom-left-radius: 32rpx;
    /* 左下角 */
    border-bottom-right-radius: 32rpx;
    /* 右下角 */

    .tabbarTop {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      width: 100%;
      height: 80rpx;
      align-items: center;

      .left {
        width: 136rpx;
        height: 64rpx;
        background-color: #fff;
        border-radius: 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
        margin-left: 32rpx;

        >view {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;

          >image {
            width: 36rpx;
            height: 36rpx;
          }
        }

        .l_back::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 1px;
          height: 30rpx;
          background-color: #ccc;
        }
      }
    }

    .myIntegral {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .title-f {
        text-align: center;
        opacity: 0.64;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        letter-spacing: 0;
      }

      .title-t {
        font-weight: 700;
        font-size: 64rpx;
        color: #ffffff;
        text-align: center;
      }
    }

    .runningWater {
      z-index: 999;
      position: absolute;
      width: 702rpx;
      left: 50%;
      bottom: -35rpx;
      transform: translateX(-50%);
      height: 106rpx;
      background-image: linear-gradient(130deg, #fffbf5 0%, #fff5e8 100%);
      box-shadow: 0 2rpx 8rpx 0 #fbdaaf30;
      border-radius: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      >view {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .text {
        font-weight: 600;
        font-size: 28rpx;
        color: #000000a3;
        letter-spacing: 0;
      }

      .image {
        width: 24rpx;
        height: 24rpx;
        margin-left: 5px;
      }
    }
  }
}
</style>
